<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq-demo-05page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css">
	<script type="text/javascript" src="script/lib/jquery-1.11.2.js"></script>
	<script type="text/javascript" src="script/lib/jquery.mobile-1.4.5.js"></script>
</head>
<body>
	<div data-role="page">
		<div data-role="header" data-theme="a" data-position="fixed">
			<h2>相册</h2>
		</div>
		<div role="main" class="ui-content">
			<div data-role="controlgroup" data-type="horizontal">
			    <a href="#" class="ui-btn ui-corner-all">No icon</a>
			    <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
			    <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
			    <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">Top</a>
			    <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">Bottom</a>
			    <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
			</div>
			<a href="#leftpanel3" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">overlay</a>

			<div data-role="collapsible" data-collapsed="true">
			    <h4>Heading</h4>
			    <ul data-role="listview">
			        <li><a href="#">List item 1</a></li>
			        <li><a href="#">List item 2</a></li>
			        <li><a href="#">List item 3</a></li>
			    </ul>
			</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
			    <ul>
			        <li><a href="#" data-icon="grid">Summary</a></li>
	                <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
	                <li><a href="#" data-icon="gear">Setup</a></li>
			    </ul>
			</div><!-- /navbar -->
		</div>


		<div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="b">
	        <h3>Left Panel: Overlay</h3>
	        <p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
	        <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
	        <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>
		</div><!-- /leftpanel3 -->

	</div>
</body>
</html>